<template>
	<NavBar   :size="26" top='75rpx' title='在线客服' colorText='#000'>
		<view class="on-line">
			<view class="cooperation-container">
				<!-- 使用image标签作为背景图片 -->
				<image class="background-img" :src="backgroundImg" mode="widthFix"></image>
				<!-- 二维码直接使用图片上的<image class="imgs" :src="imgUrl" mode=""></image>-->
			</view>
		</view>
	</NavBar>

</template>
<script setup lang='ts'>
	import {ref, onMounted} from 'vue'
	import { getPostersConfig } from '../../utils/config.js'

	const imgUrl = ref('/static/uni.png')
	const backgroundImg = ref('') // 默认值

	// 页面加载时获取海报配置
	onMounted(async () => {
		try {
			const postersConfig = await getPostersConfig(false)
			console.log('在线客服页面海报配置:', postersConfig)

			// 设置在线客服背景
			if (postersConfig.customer_poster) {
				backgroundImg.value = postersConfig.customer_poster
				console.log('在线客服背景加载成功:', postersConfig.customer_poster)
			} else {
				console.log('没有配置在线客服背景，使用默认图片')
			}
		} catch (error) {
			console.error('加载在线客服背景失败:', error)
			// 使用默认背景图
		}
	})

</script>
<style>
	.on-line{
		background: linear-gradient( 180deg, #C2DDFF 0%, #FFFFFF 100%);
		border-radius: 0rpx 0rpx 0rpx 0rpx;
		padding: 30rpx;
		box-sizing: border-box;
		width: 100%;
		min-height: 100vh;
		padding-top: 184rpx;
	}
	.cooperation-container{
		  width: 100%;
		 min-height: 100vh;
		 position: relative;
		 overflow: hidden;

	}
	
	/* 背景图片样式 */
	.background-img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	.imgs{
		width: 311rpx;
		height: 310rpx;
		position: absolute;
		left: 4.2%;
		bottom: 5.1%;
		border-radius: 35rpx;
		z-index: 2;
	}
	/* 设置导航栏背景透明 */
	.uni-navbar{
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        z-index: 3;
        background-color: transparent !important;
    }
    

</style>